<template>
  <div class="loading unified-bg">
    <div class="main">
      <div class="tab-box">
        <div class="weui-tab" id="tab">
          <div class="weui-navbar">

            <div class="weui-navbar__item">
              <div class="content-wrap">
                <div class="icon-box bg-6a">
                  <p class="p-box bg-2f">
                    <i class="icon iconfont color-f">&#xe7c6;</i>
                  </p>
                </div>
                <span>进行中</span>
              </div>
            </div>

            <div class="weui-navbar__item">
              <div class="content-wrap">
                <div class="icon-box bg-6a">
                  <p class="p-box bg-2f">
                    <i class="icon iconfont color-f">&#xe7c5;</i>
                  </p>
                </div>
                <span>已完成</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 已完成 S -->
      <div v-show="tabIndex == 1" class="content">
        <completed :userId="userInfo.id"></completed>
      </div>
      <!-- 已完成 E -->

      <!-- 进行中 S -->
      <div v-show="tabIndex == 0" class="content">
        <progressing :userId="userInfo.id"></progressing>
      </div>
      <!-- 进行中 E -->
    </div>
  </div>
</template>
<script>
  import { mapState } from 'vuex';
  export default {
    data () {
      return {
      }
    },

    computed: {
      ...mapState({
        route: state => state.route,
        path: state => state.route.path,
        role: state => state.userInfo.role,
        userInfo: state => state.userInfo
      })
    },

    created () {
      let openId = this.$route.params.openId;
      this.$store.dispatch('updateOpenId', openId)
    },

    mounted () {
      this.title('订单');
      const that = this;
      weui.tab('#tab', {
        defaultIndex: 0,
        onChange: function (index) {
          that.tabIndex = index;
        }
      });
    },

    components: {
      completed: require('./completed.vue'),
      progressing: require('./progressing')
    },

    methods: {
    }
  }
</script>
<style lang="scss" >
  @import '../../../styles/user/order/loading.scss';
  .weui-navbar {
    position: relative;
  }
</style>
